<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="detailRegister"
    @close="drawerReset"
    width="920"
    :showOkBtn="false"
    cancelText="关闭"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <template v-if="drawerState.showType === 'userDetail'">
        <div class="drawer-item">
          <div class="item-label">会话ID</div>
          <div class="item-value">{{ drawerState.record.sessionId }}</div>
        </div>
        <div class="drawer-item">
          <div class="item-label">会话名称</div>
          <div class="item-value">{{ drawerState.record.sessionTitle }}</div>
        </div>
      </template>
      <div class="drawer-item">
        <div class="item-label">问题</div>
        <div class="item-value" v-html="contextQueryFormat()"></div>
      </div>
      <div class="drawer-item">
        <div class="item-label">回答</div>
        <div class="item-value" v-html="contextMsgFormat()"></div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { ReloadOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import { md } from '@/utils/markdown'

const emit = defineEmits(['register'])

const drawerState = reactive<any>({
  record: {},
  showType: ''
})

const [detailRegister, { closeDrawer, changeLoading }] = useDrawerInner((data) => {
  let record = cloneDeep(data.record)
  drawerState.record = record || {}
  drawerState.showType = data.showType || ''
})

// 对话markdown格式化
const contextMsgFormat = () => {
  let contextMsg = drawerState.record.acontent
  if (contextMsg) {
    contextMsg = contextMsg.replace(/\\n/g, '\r\n') // 转化标题
    contextMsg = md.render(contextMsg as string)
  }
  return contextMsg || '--'
}
const contextQueryFormat = () => {
  let contextMsg = drawerState.record.qcontent
  if (contextMsg) {
    contextMsg = contextMsg.replace(/\\n/g, '\r\n') // 转化标题
    contextMsg = md.render(contextMsg as string)
  }
  return contextMsg || '--'
}

const drawerReset = () => {
  drawerState.record = {}
  drawerState.showType = ''
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 14px 155px 0 34px;
  .drawer-item {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    .item-label {
      width: 48px;
      flex-shrink: 0;
      font-weight: 500;
      font-size: 12px;
      color: #192236;
      line-height: 30px;
      text-align: right;
      margin-right: 8px;
    }
    :deep(.item-value) {
      font-weight: 500;
      font-size: 14px;
      color: #555d6f;
      line-height: 16px;
      word-break: break-all;
      background: #fafafa;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #cdcdcd;
      padding: 6px;
      p,
      table,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin-bottom: 12px;
        font-size: 14px;
        font-weight: 600;
      }
      p,
      table,
      li {
        font-weight: 400;
      }
      ul {
        padding-left: 32px;
        list-style-type: circle;
      }
      ol {
        list-style: decimal;
        padding-left: 32px;
      }
      li {
        margin-bottom: 6px;
      }
      p:last-child {
        margin-bottom: 0;
      }
      code,
      pre {
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      table {
        overflow-x: auto;
        th {
          word-break: keep-all;
          word-wrap: break-word;
        }
        th,
        td {
          padding: 2px 6px;
        }
      }
    }
  }
}
</style>
